<template>
  <div class="public_height100 p20 pub_bgColorFFF">
    <div class="table_content">
      <!-- ====== 表格上方的筛选条件 start ======-->
      <div class="table_filter flex_space_between">
        <div class="flex_start ">
          <div class="table_filter_search">
            <el-input v-model="params.messageContent" class="pub_input pub_input_search" placeholder="搜索内容" clearable @keydown.enter.native="handleSearch" @clear="handleSearch">
              <img slot="prefix" src="@/assets/img/orderManagement/search.png" class="pub_imgSize16" />
            </el-input>
          </div>
          <div v-if="messageType == 1 && roleType === 1" class="table_filter_search ml12 w150">
            <el-select v-model="params.readStatus" size="small" class="pub_select mr16" @change="handleSearch">
              <el-option v-for="item in readStatusArr" :key="item.readStatus" :label="item.label" :value="item.readStatus" />
            </el-select>
          </div>
          <div v-if="roleType !== 1" class="table_filter_search ml12 w150">
            <el-select v-model="params.readStatus" size="small" class="pub_select mr16" @change="handleSearch">
              <el-option label="全部" :value="undefined" />
              <el-option v-for="item in readStatusArr" :key="item.readStatus" :label="item.label" :value="item.readStatus" />
            </el-select>
          </div>
          <div v-if="messageType == 1 && roleType === 1" class="table_filter_search ml12 w150">
            <el-select v-model="params.messageTitle" size="small" class="pub_select mr16" placeholder="请选择申请类型" @change="handleSearch">
              <el-option v-for="item in applyMessageOptions" :key="item.label" :label="item.label" :value="item.label" />
            </el-select>
          </div>
          <div class="table_filter_search ml12 flex_start">
            <el-radio-group v-if="roleType === 1" v-model="messageType" size="small" @input="changeMesageType">
              <el-radio-button v-for="item in messageOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio-button>
            </el-radio-group>
            <div class=" ml12">
              <el-button type="text" class="public_confirm_btn pub_button" @click="handleSearch"> 搜索 </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- ====== 表格上方的筛选条件 end ======-->
      <!-- 超级管理员 -->
      <template v-if="roleType === 1">
        <el-table :key="`table-${messageType}`" ref="multipleTable" size="mini" :data="tableData" tooltip-effect="dark" border :height="`${536 * $f}px`" class="wp100 mt12" @selection-change="handleSelectionChange">
          <el-table-column key="sendUserId" label="用户Id" show-overflow-tooltip :prop="messageType == 2 ? 'receiveUserId' : 'sendUserId'" align="center" :width="`${200 * $f}`" />
          <el-table-column key="messageTitle" :label="messageType == 1 ? '申请类型' : '消息类型'" show-overflow-tooltip prop="messageTitle" align="center" :width="`${200 * $f}`">
            <template slot-scope="{ row }">
              <span class="cGR">{{ row.messageTitle }}</span>
            </template>
          </el-table-column>
          <el-table-column key="messageContent" :label="messageType == 1 ? '申请内容' : '消息内容'" show-overflow-tooltip prop="messageContent" align="center" />
          <el-table-column key="sendTime" label="时间" show-overflow-tooltip prop="sendTime" align="center" :width="`${200 * $f}`" />
          <el-table-column v-if="messageType == 1" key="opration" label="操作" :width="`${150 * $f}`" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button v-if="row.readStatus == 2" class="pub_button public_1EB398_btn" type="text" size="mini" @click="goPage(row)">去审批</el-button>
            </template>
          </el-table-column>
          <template slot="empty">
            <PageEmptyData />
          </template>
        </el-table>
      </template>
      <!-- 非超级管理员 -->
      <template v-if="roleType !== 1">
        <el-table ref="multipleTable" size="mini" :data="tableData" tooltip-effect="dark" border :height="`${536 * $f}px`" class="wp100 mt12" @selection-change="handleSelectionChange">
          <!-- 添加一个占位列，保持列结构一致 -->
          <el-table-column key="messageTitle" label="消息类型" show-overflow-tooltip prop="messageTitle" align="center" :width="`${200 * $f}`">
            <template slot-scope="{ row }">
              <span :class="[row.messageTitle === '品牌审批' ? 'cGR' : row.messageTitle === '规格审批' ? 'cYE' : row.messageTitle === '计量单位审批' ? 'cPU' : row.messageTitle === '会员审批' ? 'cRD' : row.messageTitle === '公司审批' ? 'cGY' : 'cYE']">{{ row.messageTitle }}</span>
            </template>
          </el-table-column>
          <el-table-column key="messageContent" label="消息内容" show-overflow-tooltip prop="messageContent" align="center"> </el-table-column>
          <el-table-column key="sendTime" label="接收时间" show-overflow-tooltip prop="sendTime" align="center" :width="`${200 * $f}`" />
          <el-table-column key="opration" label="操作" :width="`${150 * $f}`" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button :disabled="row.readStatus !== '2'" type="text" :class="['pub_button', row.readStatus === '2' ? 'public_1EB398_btn' : 'public_4D5464_btn']" size="mini" @click="setReady(row)">
                {{ row.readStatus === '2' ? '收到' : '已阅' }}
              </el-button>
            </template>
          </el-table-column>
          <template slot="empty">
            <PageEmptyData />
          </template>
        </el-table>
      </template>
      <div class="pub_pageination flex_center mt18">
        <el-pagination background :page-size="params.pageSize" :current-page.sync="params.pageNum" layout="total,prev, pager, next,sizes" :total="params.total" @current-change="changePage" @size-change="changeSize" />
      </div>
    </div>
  </div>
</template>
<script>
import tableFun from '@/mixin/tableFun.js';
export default {
  mixins: [tableFun],
  data() {
    return {
      tableData: [],
      messageType: 1, // 1:申请内容 2:消息内容
      readStatusArr: [
        { label: '未审核', readStatus: 2 },
        { label: '已审核', readStatus: 1 }
      ],
      applyMessageOptions: [{ label: '全部' }, { label: '产品审批' }, { label: '品牌审批' }, { label: '规格审批' }, { label: '计量单位审批' }],
      messageOptions: [
        { value: 1, label: '接收' },
        { value: 2, label: '发送' }
      ],
      params: { total: 0, pageSize: 20, pageNum: 1, messageContent: '', messageTitle: '全部', readStatus: 2 }
    };
  },
  created() {
    this.initParams();
  },
  methods: {
    initParams() {
      this.params = this.$options.data().params;
      if (this.messageType == 1 && this.roleType == 1) {
        this.params.readStatus = 2;
      } else {
        this.params.readStatus = undefined;
      }
      this.getDataList();
    },
    //获取站内信数据
    async getDataList() {
      this.tableData = [];
      let url = this.messageType == 1 ? this.$url.messageReceiveList : this.$url.messageSendList;
      const requestParams = {
        ...this.params,
        messageTitle: this.params.messageTitle === '全部' ? '' : this.params.messageTitle
      };
      let res = await this.$api.get(url, requestParams);
      this.tableData = res.rows;
      this.params.total = res.total;
    },
    goPage(row) {
      const queryParams = { messageContent: row.messageContent, sendUserId: row.sendUserId, messageId: row.id };
      switch (row.messageTitle) {
        case '品牌审批':
          this.$router.push({ path: '/layout/goods', query: { ...queryParams, activeIndex: '4-1' } });
          break;
        case '规格审批':
          this.$router.push({ path: '/layout/specifications', query: { ...queryParams, activeIndex: '4-5' } });
          break;
        case '计量单位审批':
          this.$router.push({ path: '/layout/measurement', query: { ...queryParams, activeIndex: '4-6' } });
          break;
        case '产品审批':
          this.$router.push({ path: '/layout/productAudit', query: { ...queryParams, activeIndex: '4-2' } });
          break;
      }
    },
    async setReady(row) {
      await this.$api.get(this.$url.messageDetail, { id: row.id });
      this.$bus.$emit('getRedDotStatus');
      this.getDataList();
    },
    handleSearch() {
      this.params = { ...this.params, pageNum: 1 };
      this.getDataList();
    },
    changeMesageType() {
      this.params = this.$options.data().params;
      this.$nextTick(() => {
        this.getDataList();
        if (this.$refs.multipleTable) {
          this.$refs.multipleTable.doLayout();
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.feedbackList {
  width: 100%;
  overflow: hidden;
  .table_content,
  .echarts {
    background: #ffffff;
    border-radius: 16px 16px 16px 16px;
    padding: 20px;
    box-sizing: border-box;
  }
  .table_content {
    width: 100%;
  }
  .table_filter_search {
    width: 200px;
  }
}
.addOrder {
  .el-form-item {
    margin-bottom: 0px;
  }
}
/* 审批类型颜色定义 */
.cPU {
  color: #9c27b0;
}
.cRD {
  color: #f44336;
}
.cGY {
  color: #9e9e9e;
}
.cYE {
  color: #ffc107;
}
</style>
